<!--
 * @Author: anonymous
 * @Date: 2022-03-28 11:48:17
 * @LastEditors: anonymous
 * @LastEditTime: 2022-04-18 16:40:03
 * @Description: 
-->
<template>
  <div class='contactConfirmation_container'>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>联系确认</span>
        <span class="contactTip" style="float:right;"> {{data.orderId}} </span>
      </div>
      <div>
        <span class="contactTip">请维修员
          <strong>{{data.workerEntity.workerName }}({{data.workerEntity.nickname}})</strong> 联系
          <strong>{{data.userEntity.nickname}}</strong> 以确认具体维修问题及维修时间。</span>
        <el-tag style="float:right;" :type="repairStatusStyle(data.statusCode)">
          {{data.repairStatusEntity.statusValue}}</el-tag>
      </div>
      <el-divider></el-divider>
      <el-descriptions :column="2">
        <el-descriptions-item label="用户名">{{data.userEntity.nickname}}</el-descriptions-item>
        <el-descriptions-item label="报修地址">{{data.repairAddress}}</el-descriptions-item>
        <el-descriptions-item label="报修问题">{{data.repairContent}}</el-descriptions-item>
        <el-descriptions-item label="联系电话"> <strong
            class="repairPhoneStyle">{{data.repairPhone}}</strong> </el-descriptions-item>
      </el-descriptions>
      <el-divider></el-divider>
      <el-row v-if="data.statusCode != 4">
        <el-col :xs="3" :sm="3" :md="3" :lg="3" :xl="3">
          <el-button type="primary" size="small" round :loading="confirmLoading"
            @click.once="confirm">已确认</el-button>
        </el-col>
        <el-col :xs="3" :sm="3" :md="3" :lg="3" :xl="3">
          <el-button type="danger" size="small" plain round @click="dialogVisible = true">驳回订单
          </el-button>
        </el-col>
      </el-row>
      <div class="contactTip" v-else> <strong>驳回原因</strong> {{data.rejectReason}} </div>
    </el-card>
    <el-dialog title="驳回原因" v-model="dialogVisible">
      <div class="contactTip">单号:{{data.orderId}}</div>
      <div class="contactTip">用户名：{{data.userEntity.nickname}}</div>
      <el-divider></el-divider>
      <el-input type="textarea" :autosize="{ minRows: 2 }" maxlength="30" show-word-limit
        placeholder="请填写驳回原因" v-model="rejectReason">
      </el-input>
      <el-row style="margin-top: 1rem;">
        <el-col :xs="3" :sm="3" :md="3" :lg="3" :xl="3">
          <el-button type="danger" size="small" round @click="reject">驳回</el-button>
        </el-col>
        <el-col :xs="3" :sm="3" :md="3" :lg="3" :xl="3">
          <el-button type="info" size="small" plain round
            @click="()=>{dialogVisible = false; rejectReason = ''}">取消</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { repairStatusStyle, createOrderDetailsStep } from '@/js/public.js'
import { useMainStore } from '@/js/store.js'

export default {
  data () {
    //这里存放数据
    return {
      store: useMainStore(),
      data: useMainStore().recordDetails.data,
      repairStatusStyle,
      confirmLoading: false,
      dialogVisible: false,
      rejectReason: ''
    }
  },
  methods: {
    confirm () {
      this.confirmLoading = true;
      this.axios.post("/workerHome/confirmContact", { order: this.data.orderId }).then(res => {
        this.confirmLoading = false;
        if (res.data.code == 43001) {
          this.$message.error(res.data.msg);
          return;
        }
        this.$message.success(res.data.msg);
        this.store.recordDetails.step = createOrderDetailsStep(res.data.data)[0];
      })
    },
    reject () {
      let rejectReason = this.rejectReason.trim();
      if (rejectReason.length <= 3) {
        this.$message.error("驳回原因不得少于5个字符");
        return;
      }

      let data = JSON.parse(JSON.stringify(this.data));
      data.imgUrl = data.imgUrl ? JSON.stringify(data.imgUrl) : data.imgUrl;
      data.rejectReason = rejectReason;

      this.axios.post("/workerHome/rejectOrder", data).then(res => {
        if (res.data.code == 43001) {
          this.$message.error(res.data.msg);
          return;
        }
        this.$message.success(res.data.msg);
        this.dialogVisible = false;
        this.rejectReason = '';
        this.data.statusCode = 4;
        for (let i = 0, workerOrders = this.store.workerOrders; i < workerOrders.length; i++) {
          if (workerOrders[i].orderId == data.orderId) {
            data.imgUrl = data.imgUrl ? JSON.parse(data.imgUrl) : data.imgUrl;
            data.statusCode = 4;
            workerOrders[i] = data;
          }
        }
        this.store.recordDetails.step = createOrderDetailsStep(res.data.data)[0];
      })
    }
  }
}
</script>

<style lang='scss' scoped>
//@import url(); 引入公共css
.contactConfirmation_container {
  .contactTip {
    color: gray;
    font-size: 14px;
  }
  .repairPhoneStyle {
    border: 1px dashed gray;
    padding: 2px;
    border-radius: 6px;
  }
}
</style>
